<template>
  <el-dialog :visible.sync="upload.open" :title="upload.title">
    <div class="el-row--flex" style="justify-content: center">
      <el-upload
        drag
        :action="upload.url"
        :headers="upload.headers"
        :disabled="upload.isUploading"
        ref="upload"
        :limit="1"
        accept=".xlsx, .xls"
        :on-progress="handleFileUploadProgress"
        :on-success="handleFileSuccess"
        :auto-upload="false">
        <i class="el-icon-upload"></i>
        <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
        <div class="el-upload__tip" slot="tip">提示：仅允许导入“xls”或“xlsx”格式文件！
          <el-link type="primary" @click="importTemplate()" download>下载模板</el-link>
        </div>
      </el-upload>
    </div>

    <div slot="footer">
      <el-button @click="confirm" type="primary">确认</el-button>
      <el-button @click="cancel" type="danger">取消</el-button>
    </div>
  </el-dialog>
</template>

<script>
import {importAskAnswerTemplate} from '@/api/askAnswerTemplate'
import environment from "@/utils/environment";
import en from "element-ui/src/locale/lang/en";


export default {
  name: "FileUploadDialog",
  props: {
    askDialogShow: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      upload: {
        open: true,
        url: environment.getBaseUrl() + '/robotChat/importData',
        headers: {
          Authorization: "Bearer " +  this.getToken()
        },
        title: "上传问答模版",
        isUploading: false,
      }
    }
  },
  methods: {
    cancel() {
      this.upload.open = false;
    },
    confirm() {
      this.$refs.upload.submit();
      this.upload.open = false;
    },
    handleFileUploadProgress() {
      this.upload.isUploading = true;
    },
    handleFileSuccess(response, file, fileList) {
      this.upload.open = false;
      this.upload.isUploading = false;
      this.$refs.upload.clearFiles();
      this.$alert(response.msg, "导入结果", {dangerouslyUseHTMLString: true});
    },
    importTemplate() {
      importAskAnswerTemplate().then(res => {
        console.log(res);
        this.download(res.msg);
      })
    }
  },
  components: {},
  watch: {
    askDialogShow: {
      handler(newVal) {
        this.upload.open = newVal;
      }
    },
    upload: {
      handler(newVal) {
        if (!newVal.open) {
          this.$emit("hideDialog")
        }
      },
      deep: true
    }
  },
  computed: {},
  created() {
    this.upload.open = this.askDialogShow;
  }

}
</script>
<style >

</style>
